<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>Account Profile</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>
<body>
<span th:fragment="accesstokens">

    <script type="text/javascript">
            (() => {
                document.addEventListener('DOMContentLoaded', () => {
                    $('#oidcAccessTokensTable').DataTable();
                });
            })();
    </script>

    <div id="divOidcAccessTokens" th:if="${oidcAccessTokens}" class="profile-content w-100" style="display: none;">
        <h2>
            <i class="mdi mdi-account-reactivate fas fa-door-open" aria-hidden="true"></i>
            <span th:utext="#{screen.account.accesstokens.title}">Access Tokens</span>
        </h2>
        <p th:utext="#{screen.account.accesstokens.subtitle}">Access tokens are listed here</p>

        <table id="oidcAccessTokensTable" class="mdc-data-table__table table table-striped noborder">
            <thead>
                <tr class="mdc-data-table__header-row">
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">ID</th>
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Service</th>
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Client ID</th>
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Scopes</th>
                    <th class="mdc-data-table__header-cell" role="columnheader" scope="col"></th>
                </tr>
            </thead>
            <tbody class="mdc-data-table__content">
                <tr th:each="entry : ${oidcAccessTokens}" class="mdc-data-table__row">
                   <td class="mdc-data-table__cell" th:title="${entry.id}" th:utext="${entry.id}">Value</td>
                   <td class="mdc-data-table__cell" th:title="${entry.service}"
                       th:utext="${entry.service.id}">Value</td>
                   <td class="mdc-data-table__cell" th:title="${entry.clientId}" th:utext="${entry.clientId}">Value</td>
                   <td class="mdc-data-table__cell" th:title="${entry.scopes}"
                       th:utext="${#strings.setJoin(entry.scopes, ',')}">Value</td>

                   <td class="mdc-data-table__cell">
                        <form id="fm1" method="post" th:action="@{'/account#divOidcAccessTokens'}">
                            <div class="d-flex">
                                <button class="btn btn-link text-danger">
                                    <i class="mdi mdi-delete fas fa-trash" aria-hidden="true"></i>
                                </button>
                            </div>
                            <input type="hidden" name="execution" th:value="${flowExecutionKey}" />
                            <input type="hidden" name="id" th:value="${entry.id}" />
                            <input type="hidden" name="clientId" th:value="${entry.clientId}" />
                            <input type="hidden" name="_eventId" value="revokeAccessToken" />
                        </form>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</span>
</body>
</html>
